<script setup lang="ts">
import {ref, onMounted, watchEffect} from 'vue';
import type {Coach, MemberPageResp, PageCoach} from "@/type/coach.ts";
import {memberGetPageCoaches} from "@/api/coach";

const coaches = ref<Coach[]>([]); // 教练列表
const selectedCoach = ref<Coach | null>(null); // 当前选中的教练
const dialogVisible = ref(false); // 控制弹窗显示
const searchKeyword = ref(''); // 搜索关键词
const searchType = ref<'name' | 'specialization'>('name'); // 搜索类型
const currentPage = ref(1); // 当前页码
const pageSize = ref(8); // 每页显示的教练数量
const total = ref(0)

// 获取教练数据
const fetchCoaches = async () => {
  const pageInfo: PageCoach = {
    coachName: searchType.value === 'name' ? searchKeyword.value : '',
    specialization: searchType.value === 'specialization' ? searchKeyword.value : '',
    page: currentPage.value,
    pageSize: pageSize.value
  }
  console.log(pageInfo)
  const result: MemberPageResp = await memberGetPageCoaches(pageInfo)
  if (result.code == 1) {
    total.value = result.data.total
    coaches.value = result.data.records
  }
};

// 查看教练详情
const handleViewDetails = (coachId: number) => {
  selectedCoach.value = coaches.value.find((coach) => coach.coachId === coachId) || null;
  dialogVisible.value = true; // 打开弹窗
};

// 关闭详情弹窗
const closeDetail = () => {
  dialogVisible.value = false; // 关闭弹窗
  selectedCoach.value = null; // 清空选中的教练
};

// 监控查询变量-有变则重新查询
watchEffect(() => {
  fetchCoaches();
})
// 组件挂载时获取数据
onMounted(() => {
  fetchCoaches();
});
</script>

<template>
  <div class="coach-view">
    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
          v-model="searchKeyword"
          placeholder="请输入姓名或专业领域"
          class="search-input"
          clearable
      />
      <el-select v-model="searchType" placeholder="请选择搜索类型" class="search-type">
        <el-option label="按姓名搜索" value="name" />
        <el-option label="按专业领域搜索" value="specialization" />
      </el-select>
    </div>

    <!-- 教练列表 -->
    <div class="coach-list-container">
      <el-row :gutter="20" class="coach-list">
        <el-col
            v-for="coach in coaches"
            :key="coach.coachId"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
        >
          <el-card class="coach-card" @click="handleViewDetails(coach.coachId)">
            <template #header>
              <div class="card-header">
                <img :src="coach.avatar" alt="Coach Avatar" class="avatar" />
                <h3>{{ coach.coachName }}</h3>
              </div>
            </template>
            <div class="info">
              <p><strong>专业领域:</strong> {{ coach.specialization }}</p>
              <p><strong>性别:</strong> {{ coach.gender }}</p>
              <p><strong>年龄:</strong> {{ coach.age }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          class="pagination"
      />
    </div>

    <!-- 教练详情弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="教练详情"
        width="800px"
        :before-close="closeDetail"
        class="coach-detail-dialog"
    >
      <div v-if="selectedCoach" class="coach-detail">
        <div class="detail-left">
          <div class="detail-header">
            <img :src="selectedCoach.avatar" alt="Coach Avatar" class="avatar" />
            <div class="header-info">
              <h2>{{ selectedCoach.coachName }}</h2>
              <p class="specialization">{{ selectedCoach.specialization }}</p>
            </div>
          </div>
          <div class="detail-body">
            <div class="detail-item">
              <span class="label">性别:</span>
              <span class="value">{{ selectedCoach.gender }}</span>
            </div>
            <div class="detail-item">
              <span class="label">年龄:</span>
              <span class="value">{{ selectedCoach.age }}</span>
            </div>
          </div>
        </div>
        <div class="detail-right">
          <div class="introduction">
            <p class="label">详细介绍：</p>
            <p class="value">{{ selectedCoach.introduction }}</p>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="closeDetail">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.coach-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 800px;

    .search-input {
      width: 300px;
    }

    .search-type {
      width: 150px;
    }
  }

  .coach-list-container {
    width: 80%;
    max-width: 1200px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .coach-list {
      margin-bottom: 20px;
    }

    .coach-card {
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border-radius: 8px;
      overflow: hidden;
      margin: 10px 0;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .card-header {
        display: flex;
        align-items: center;

        .avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-right: 16px;
        }

        h3 {
          margin: 0;
          font-size: 18px;
          color: #303133;
        }
      }

      .info {
        p {
          margin: 4px 0;
          font-size: 14px;
          color: #606266;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }

  .coach-detail-dialog {
    .coach-detail {
      display: flex;
      gap: 24px;

      .detail-left {
        flex: 1;
        max-width: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .detail-header {
          text-align: center;
          margin-bottom: 20px;

          .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 16px;
          }

          .header-info {
            h2 {
              margin: 0;
              font-size: 24px;
              color: #303133;
            }

            .specialization {
              margin: 8px 0;
              font-size: 16px;
              color: #606266;
            }
          }
        }

        .detail-body {
          width: 100%;
          text-align: center;

          .detail-item {
            margin-bottom: 16px;

            .label {
              font-weight: bold;
              color: #303133;
            }

            .value {
              color: #606266;
            }
          }
        }
      }

      .detail-right {
        flex: 1;
        max-width: 300px;

        .introduction {
          .label {
            font-weight: bold;
            color: #303133;
            font-size: 16px;
            margin-bottom: 8px;
          }

          .value {
            color: #606266;
            line-height: 1.6;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>